Pinia入门 |
您所在的位置:网站首页 › flink async › Pinia入门 |
Store是什么? 全局状态,用于在所有组件中,同步数据。 Store的应用场景?在整个应用程序中访问的数据(且不需要被持久化),例如导航栏中显示的用户信息,以及需要通过页面保留的数据,例如一个非常复杂的多步骤表格。 pinia是什么?简单一句介绍,vuex的升级版,抛弃了烦人的Mutation。 其他优点action支持同步和异步;良好的TypeScript支持;支持用插件扩展功能;扁平架构,没有嵌套;服务端渲染支持。应用示例下面我们以一个管理平台的员工账号信息为例,展示Pinia的使用方式。 本文作者认为setup是更好的组织代码的方式,所以都用setup编写下面的示例。 安装和挂载部分,直接看文档。 定义Storeimport { defineStore } from 'pinia' // 第一个参数是应用程序中 store 的唯一 id export const useUserStore = defineStore('user', { // other options... })使用Storeimport { useUserStore } from '@/stores/user' export default { setup() { const userStore = useUserStore() return { // 您可以返回整个 store 实例以在模板中使用它 userStore, } }, }(如果习惯用选项式API,还是可以配合map helpers,声明各种map来访问store。) 获取store的响应式数据直接解构会破坏响应式,需要用storeToRefs()提取属性并保持响应式。 import { storeToRefs } from 'pinia' export default defineComponent({ setup() { const userStore = useUserStore() // ❌ 这不起作用,因为它会破坏响应式 // 这和从 props 解构是一样的 const { userName } = userStore // 这样可以保持响应式 const { userId } = storeToRefs(userStore) userName // "lucio" userId // "001" return { // 一直会是 "lucio" userName, // 这将是响应式的 userId, // 这将是响应式的 realUserName: computed(() => userStore.userName), } }, })State返回初始状态的函数。 我们补全一下上面的定义Store部分的代码。 初始化import { defineStore } from 'pinia' // 第一个参数是应用程序中 store 的唯一 id export const useUserStore = defineStore('user', { state: () => { return { // 所有这些属性都将自动推断其类型 userName: 'lucio', userId: '001', } }, })读取和写入state通过store示例,可读写。const userStore = useUserStore() userStore.userId = '002' userStore.$reset() return { userStore }通过$patch修改多个数据,参数可以是对象或者函数。// 一次修改多个数据 userStore.$patch({ userId: '002', userName: 'lucy', }) // 适合对数组进行修改 userStore.$patch((state) => { state.roles.push({ name: 'admin', priority: 1 }) })替换整个stateuserStore.$state = { userId: '002', userName: 'lucy'} // 或者通过pinia实例替换整个应用程序的状态 pinia.state.value = {}订阅state变化可以通过 store 的 $subscribe() 方法查看状态及其变化,其只在patch之后触发一次。 默认情况下,组件卸载后,订阅会被删除。如果想保留,设置配置项detached为true。 userStore.$subscribe((mutation, state) => { // import { MutationType } from 'pinia' mutation.type // 'direct' | 'patch object' | 'patch function' // 与 userStore.$id 相同 mutation.storeId // 'user' // 仅适用于 mutation.type === 'patch object' mutation.payload // 补丁对象传递给 to userStore.$patch() // 每当它发生变化时,将整个状态持久化到本地存储 localStorage.setItem('user', JSON.stringify(state)) }, { detached: true }, // detached为true,卸载组件后保留订阅 )Getters返回状态的计算值。 定义getterimport { defineStore } from 'pinia' // 第一个参数是应用程序中 store 的唯一 id export const useUserStore = defineStore('user', { state: () => { return { // 所有这些属性都将自动推断其类型 userName: 'lucio', userId: '001', } }, getters: { // 自动推断返回类型为字符串 userText: (state) => `User: ${state.userName}`, // 也可以使用其他getter, 用this访问store实例,必须要定义返回类型 userTextPlus: (): string => `The name of ${this.userText}`, } })访问getter直接用store的实例访问。 userStore.userText(getters也可以传递参数,不是很常用的场景,这里就不示例了。) (在A store中,也可以使用B store的getter) Actions相当于组件中的methods,适合用于定义组件的业务逻辑。 定义action下面我们继续补全上面的示例,在userStore中通过网络请求获取用户数据。 import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => { return { userName: 'lucio', userId: '001', userData: null, } }, getters: { // ... }, actions: { async loginAndGetUserInfo(password) { try { this.userData = await api.login({password}); showToast('Login success'); } catch(error) { showToast(error); return error; } } } })订阅action可以使用 store.$onAction() 订阅 action 及其结果。 下面对userStore添加一个订阅,记录上面的登陆操作,所用的时间 const unsubscribe = userStore.$onAction( ({ name, // action 的名字 store, // store 实例 args, // 调用这个 action 的参数 after, // 在这个 action 执行完毕之后,执行这个函数 onError, // 在这个 action 抛出异常的时候,执行这个函数 }) => { // 记录开始的时间变量 const startTime = Date.now() // 这将在 `store` 上的操作执行之前触发 console.log(`Start "${name}" with params [${args.join(', ')}].`) // 如果 action 成功并且完全运行后,after 将触发。 // 它将等待任何返回的 promise after((result) => { console.log( `Finished "${name}" after ${ Date.now() - startTime }ms.\nResult: ${result}.` ) }) // 如果 action 抛出或返回 Promise.reject ,onError 将触发 onError((error) => { console.warn( `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.` ) }) } ) // 手动移除订阅 unsubscribe()和订阅state一样,组件卸载时,订阅将被删除,可以添加设置第二个参数detach为true,在卸载组件后仍然保留订阅。 export default { setup() { const someStore = useSomeStore() // 此订阅将在组件卸载后保留 someStore.$onAction(callback, true) // ... }, } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |